<script setup lang="ts">
import { computed,  } from 'vue'
import {
    Iphone,
    Location,
    OfficeBuilding,
    Tickets,
    User,
    Lock,
    Message,
    ChatRound,
    Position,
    Calendar,
    CreditCard,
    StarFilled

} from '@element-plus/icons-vue'

const size = ref('Large')
const iconStyle = computed(() => {
    const marginMap = {
        large: '8px',
        default: '6px',
        small: '4px',
    }
    return {
        marginRight: marginMap[size.value] || marginMap.default,
    }
})
const blockMargin = computed(() => {
    const marginMap = {
        large: '32px',
        default: '28px',
        small: '24px',
    }
    return {
        marginTop: marginMap[size.value] || marginMap.default,
    }
})

interface RuleForm {
    username: String,
    id: Number,
    nickname: String,
    email: String,
    ruler: Number,
    user_pic: String,
    phone: String,
    sex: String,
    age: Number,
    hobby: String

}

const addData = ref<RuleForm>({
    username: '',
    id: null,
    nickname: '',
    email: '',
    ruler: null,
    user_pic: '',
    phone: '',
    sex: '',
    age: null,
    hobby: ''
    
})
import { reactive } from 'vue'

const formInline = reactive({
    region1: '',
    region2: '',
})

const onSubmit = () => {
    console.log('submit!')
}
import { ref } from 'vue'

const currentPage = ref(1)
const pageSize = ref(4)
const dynasty = ref('')
const subject = ref('')
const totalpage = ref()
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const dialogshiciVisible = ref(false)
const dialoshicigname = ref()
const displaydel = ref(false)
const title = ref('')

const handleSizeChange = (size) => {
    pageSize.value = size
    shiciData()
}
const handleCurrentChange = (current) => {
    currentPage.value = current
    shiciData()
}
import {
    Delete,
    Edit,
    WarningFilled
} from '@element-plus/icons-vue'

import { shicilistServer } from '@/api/shici.js';
import { ElMessage, FormRules } from 'element-plus';

const tableData = ref()

const add_reg = /^[\u4e00-\u9fa5]+$/
interface shiciRuleForm {
    addtitle: String,
    addpara: String,
    adddynasty: String,
    addauthor: String,
    addsubject: String,
    addId: Number,
}

const addshiciData = ref<shiciRuleForm>({
    addtitle: '',
    addpara: '',
    addauthor: '',
    adddynasty: '',
    addsubject: '',
    addId: null,
})
import { getUserinfoServer } from '@/api/user.js'
import useUserInfo from '@/stores/userinfo.js'
import moment from 'moment';
const userinfo = getUserinfoServer();
const useuserinfo = useUserInfo() as any;
const getUserinfo = async()=>{
    let result = await getUserinfoServer();
    useuserinfo.setInfo(result.data);
    useuserinfo.info.updateTime = moment(useuserinfo.info.updateTime).format('YYYY-MM-DD HH:mm')
    useuserinfo.info.createTime = moment(useuserinfo.info.createTime).format('YYYY-MM-DD HH:mm')
}
getUserinfo();
const ruler = ref(useuserinfo.info.ruler)

const shiciData = async () => {
    const name = ref(useuserinfo.info.username)
    let params = {
        countpage: currentPage.value,
        pagenumber: pageSize.value,
        dynasty: '现代',
        subject: '现代诗',
        author: name.value,
        title: title.value ? title.value : null,
    }

    let result = await shicilistServer(params)
    tableData.value = result.data.items
    console.log(tableData.value)
    totalpage.value = result.data.total
}

shiciData();

const clearshiciadddata = () => {
    addshiciData.value = {
        addtitle: '',
        addpara: '',
        addauthor: '',
        adddynasty: '',
        addsubject: '',
        addId: null,
    }
}

import { addshiciServer, updatashiciServer, delshiciServer } from '@/api/shici.js';
const addshici = async () => {
    dialogVisible.value = false;
    let result = await addshiciServer(addshiciData.value) as any;
    ElMessage.success(result.message ? result.message : '添加成功')
    clearadddata()
    shiciData()
}

const updatashici = async () => {
    dialogVisible.value = false;
    let result = await updatashiciServer(addshiciData.value) as any;
    ElMessage.success(result.message ? result.message : '修改成功')
    clearadddata()
    shiciData()
}

const delshici = async () => {
    displaydel.value = false
    let result = await delshiciServer(addshiciData.value.addId) as any;
    ElMessage.success(result.message ? result.message : '删除成功')
    clearadddata()
    shiciData()
}

const shicirules = reactive<FormRules<shiciRuleForm>>({
    addtitle: [
        { required: true, message: '请输入诗词标题', trigger: 'blur' },
        { pattern: add_reg, message: '诗词标题应为全中文', trigger: 'blur' }
    ],

    addauthor: [
        { required: true, message: '请输入诗词作者名', trigger: 'blur' },
        { pattern: add_reg, message: '诗词作者名应为全中文', trigger: 'blur' }
    ],

    addpara: [
        { required: true, message: '请输入诗词内容', trigger: 'blur' },
        { min: 1, max: 8000, message: '诗词内容应为全中文', trigger: 'blur' }
    ],
})

const showupdatashiciDiglog = (row) => {
    dialogshiciVisible.value = true
    dialogname.value = '修改诗词'
    addshiciData.value.addauthor = row.author
    addshiciData.value.adddynasty = row.dynasty
    addshiciData.value.addpara = row.paragraphs
    addshiciData.value.addsubject = row.subject
    addshiciData.value.addtitle = row.title
    addshiciData.value.addId = row.idS

}

const showdelDiglog = (row) => {
    displaydel.value = true
    dialogname.value = '提示'
    addshiciData.value.addId = row.idS

}




const dialogVisible = ref(false)
const dialogname = ref()
import { updatauserServer } from '@/api/user.js';
import { beauthorServer } from '@/api/author.js';
import { RefSymbol } from '@vue/reactivity';
const updatauser = async () => {
    dialogVisible.value = false;
    let result = await updatauserServer(addData.value) as any;
    ElMessage.success(result.message ? result.message : '修改成功')
    getUserinfo()
}

const reg_email = /(^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$)/
const reg_phone = /(^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$)/
const reg_age=/^(?:[1-9][0-9]?|1[01][0-9]|120)$/;//年龄是1-120之间有效

const rules = reactive<FormRules<RuleForm>>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 15, message: '用户名要求3到15位的非空字符串', trigger: 'blur' }
    ],

    email: [
        { required: false, message: '请输入邮箱', trigger: 'blur' },
        { pattern: reg_email, message: '名称允许汉字、字母、数字，域名只允许英文域名', trigger: 'blur' }
    ],

    phone: [
        { required: false, message: '请输入手机号', trigger: 'blur' },
        { pattern: reg_phone, message: '请输入正确的手机号', trigger: 'blur' }
    ],

    age: [
        { required:false,message:'请输入年龄',trigger:'blur'},
        { pattern: reg_age,message:'年龄要求0到120岁',trigger:'blur'}
    ],


    nickname: [
        { required: false, message: '请输入昵称', trigger: 'blur' },
        { min: 1, max: 15, message: '昵称要求1到15位', trigger: 'blur' }
    ]
})

const clearadddata = () => {
    addData.value = {
        username: '',
        id: null,
        nickname: '',
        email: '',
        ruler: null,
        phone: '',
        user_pic: '',
        sex: '',
        age: null,
        hobby: ''
    }
}

const showupdataDiglog = () => {
    dialogVisible.value = true
    dialogname.value = '修改用户信息'
    addData.value.username = useuserinfo.info.username
    addData.value.nickname = useuserinfo.info.nickname
    addData.value.email = useuserinfo.info.email
    addData.value.id = useuserinfo.info.id
    addData.value.phone = useuserinfo.info.phone
    addData.value.ruler = useuserinfo.info.ruler
    addData.value.age = useuserinfo.info.age
    addData.value.sex = useuserinfo.info.sex
    addData.value.hobby = useuserinfo.info.hobby
    

}
const bi = ref()
const isbeauthor = ref(false)
const showbe = async () =>{
    isbeauthor.value = true
}
const beauthor = async () =>{
    isbeauthor.value = false
    console.log(bi.value)
    let result = await beauthorServer(bi.value) as any;
    ElMessage.success(result.message ? result.message : '操作成功')
    
}
</script>

<template>
    <el-card style="max-width: 100%;height: auto;background-color: #D1CFB9" >
        <div class="card-header">
            <span>个人信息</span>
        </div>
        <div style="margin-top: 20px;">
            <hr>
        </div>
        <el-descriptions class="margin-top"  :column="1" :size="size" border style="background-color: #F0EFE2;;">
            <template #extra>
                <el-button type="primary" @click="showupdataDiglog()" style="background-color: bisque;">修改</el-button>
            </template>
            <el-descriptions-item >
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <user />
                        </el-icon>
                        用户名
                    </div>
                </template>
                <el-text type="primary">{{ useuserinfo.info.username }}</el-text>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <CreditCard />
                        </el-icon>
                        性别
                    </div>
                </template>
                <el-text type="primary">{{ useuserinfo.info.sex }}</el-text>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <CreditCard />
                        </el-icon>
                        年龄
                    </div>
                </template>
                <el-text type="primary">{{ useuserinfo.info.age }}</el-text>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <StarFilled />
                        </el-icon>
                        兴趣爱好
                    </div>
                </template>
                <el-text type="primary">{{ useuserinfo.info.hobby }}</el-text>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <iphone />
                        </el-icon>
                        手机号
                    </div>
                </template>
                <el-text type="primary">{{ useuserinfo.info.phone }}</el-text>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <ChatRound />
                        </el-icon>
                        昵称
                    </div>
                </template>
                <el-text type="primary">{{ useuserinfo.info.nickname }}</el-text>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <Message />
                        </el-icon>
                        邮箱
                    </div>
                </template>
                <el-text type="primary">{{ useuserinfo.info.email }}</el-text>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <office-building />
                        </el-icon>
                        角色
                    </div>
                </template>
                <el-text type="primary">{{ useuserinfo.info.ruler }}</el-text>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <Calendar />
                        </el-icon>
                        创建时间
                    </div>
                </template>
                <el-text type="primary">{{ useuserinfo.info.createTime }}</el-text>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <Calendar />
                        </el-icon>
                        最后修改时间
                    </div>
                </template>
                <el-text type="primary">{{ useuserinfo.info.updateTime }}</el-text>
            </el-descriptions-item>
        </el-descriptions>
    </el-card>
        <el-dialog v-model="dialogVisible" :title="dialogname" width="500">
            <el-form ref="form" class="add" :rules="rules" :model="addData">
                <el-form-item prop="nickname">
                    <el-input :prefix-icon="ChatRound" type="nickname" 
                        v-model="addData.nickname"></el-input>
                </el-form-item>
                <el-form-item prop="age">
                    <el-input :prefix-icon="CreditCard" type="age" 
                        v-model="addData.age"></el-input>
                </el-form-item>
                <el-form-item prop="hobby">
                    <el-input :prefix-icon="StarFilled" type="hobby" 
                        v-model="addData.hobby"></el-input>
                </el-form-item>
                <el-form-item prop="email">
                    <el-input :prefix-icon="Message" type="email" 
                        v-model="addData.email"></el-input>
                </el-form-item>
                <el-form-item prop="phone">
                    <el-input :prefix-icon="Position" type="phone" 
                        v-model="addData.phone"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-select v-model="addData.sex" placeholder="请选择" clearable>
                        <el-option label="男" value="男" />
                        <el-option label="女" value="女" />
                    </el-select>
                </el-form-item>
                <el-form-item >
                    <el-button type="warning" @click="showbe()">成为作者</el-button>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible= false">取消</el-button>
                    <el-button type="primary"
                        @click="updatauser()">确认</el-button>
                </div>
            </template>
        </el-dialog>
        <el-card style="max-width: 100%" v-if="ruler == '作者'">
        <div class="card-header">
            <span>作品管理</span>
        </div>
        <div style="margin-top: 20px;">
            <hr>
        </div>
        <el-form :inline="true" class="form-inline">
            <el-form-item label="标题">
                <el-input placeholder="请输入标题" v-model="title"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="shiciData()">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="default" @click="title = '', shiciData()">重置</el-button>
            </el-form-item> 
        </el-form>
        <el-table :data="tableData" style="width: 100%" table-layout='auto' >
            <el-table-column prop="idS" label="id" />
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="paragraphs" label="诗词" style="width: 400px;" />
            <el-table-column prop="author" label="作者" />
            <el-table-column prop="dynasty" label="朝代" />
            <el-table-column prop="subject" label="题材" />
            <el-table-column label="操作" width="180">
                <template #default="{ row }">
                    <el-button type="primary" :icon="Edit" circle @click="showupdatashiciDiglog(row)" />
                    <el-button type="danger" :icon="Delete" circle @click="showdelDiglog(row)" />
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="displaydel" :title=dialogname width="500">
            <el-icon color="red">
                <WarningFilled />
            </el-icon>
            <span style="text-align: center;display:block;font-size: 17px;">是否确认删除该诗词</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="displaydel = false, clearadddata()">否</el-button>
                    <el-button type="primary" @click="delshici()">是</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogshiciVisible" :title="dialogname" width="500">
            <el-form ref="form" class="addshici" :rules="shicirules" :model="addshiciData">
                <el-form-item label="标题" prop="addtitle">
                    <el-input placeholder="请输入标题" v-model="addshiciData.addtitle"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="addpara">
                    <el-input placeholder="请输入内容" v-model="addshiciData.addpara"></el-input>
                </el-form-item>
                <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogshiciVisible = false, clearshiciadddata()">取消</el-button>
                    <el-button type="primary" @click="dialogname == '添加诗词' ? addshici() : updatashici()">确认</el-button>
                </div>
            </template>
            </el-form>
        </el-dialog>
        <el-pagination class="el-p" v-model:current-page="currentPage" v-model:page-size="pageSize"
            :page-sizes="[4, 8, 12, 16]" :small="small" :disabled="disabled" :background="background"
            layout="jumper, prev, pager, next, sizes, total" :total="totalpage" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </el-card>
    <el-dialog v-model="isbeauthor" :title="'填写作者信息'" width="500">
            <el-form ref="form" class="add" >
                <el-form-item >
                    <el-input :prefix-icon="Position"  
                        v-model="bi"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="isbeauthor = false">取消</el-button>
                    <el-button type="primary"
                        @click="beauthor()">确认</el-button>
                </div>
            </template>
        </el-dialog>
</template>


<style scoped>
.el-descriptions {
    margin-top: 20px;
}

.cell-item {
    display: flex;
    align-items: center;
}

.margin-top {
    margin-top: 20px;
}
</style>